<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热点图案例</title>
    <style>
        body {
            background-color: #333;
        }

        .map { /* div盒子 放了一张背景图片，图片是透明的，所以给body 设置了颜色*/
            position: relative;
            width: 747px;
            height: 616px;
            background: url("./img/map.png") no-repeat;
            margin: 0 auto;
        }

        .city { /* city盒子用来定位，在city盒子里面放了四个小盒子，第一个dotted 是波纹圆点，*/
            /* pulse是三圈波纹，把波纹定位到小圆点上*/
            position: absolute;
            top: 227px;
            right: 193px;
        }

        .tb {
            position: absolute; /*  台北*/
            top: 500px;
            right: 80px;
        }

        .gz {
            position: absolute; /* 广州*/
            top: 540px;
            right: 193px;
        }

        .dotted {
            width: 8px; /* 中心小圆点*/
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        .city div[class^="pulse"] {
            position: absolute;
            /* 要让三个波纹叠加到小圆点上，需要用定位，子绝父相。
                                     而小圆点是另外的盒子*/
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 保证波纹在水平垂直盒子里面居中*/
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 12px #09f; /* 阴影垂直是0，水平是0.*/
            animation: pulse 1.2s linear infinite; /* 调用动画函数，持续1.2秒，，匀速播放，一直循环*/
        }

        .pulse2 {
            animation-delay: 0.4s !important; /* 在0.4秒执行波纹2*/
        }

        .pulse3 {
            animation-delay: 0.8s !important; /* 在0.8秒执行波纹3*/
        }

        @keyframes pulse {
            0% {
            }
            70% {
                /*不用 scale 因为会让阴影变大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {

                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="map">
    <div class="city"><!--给定一个父盒子，父盒子定位到相应位置，在里面放四个小盒子 -->
        <div class="dotted"></div><!-- 原点小盒子-->
        <div class="pulse1"></div><!-- 波纹小盒子1-->
        <div class="pulse2"></div><!-- 波纹小盒子2-->
        <div class="pulse3"></div><!-- 波纹小盒子3-->
    </div>
    <div class="city tb"><!--给定一个父盒子，父盒子定位到相应位置，在里面放四个小盒子 -->
        <div class="dotted"></div><!-- 原点小盒子-->
        <div class="pulse1"></div><!-- 波纹小盒子1-->
        <div class="pulse2"></div><!-- 波纹小盒子2-->
        <div class="pulse3"></div><!-- 波纹小盒子3-->
    </div>
    <div class="city gz"><!--给定一个父盒子，父盒子定位到相应位置，在里面放四个小盒子 -->
        <div class="dotted"></div><!-- 原点小盒子-->
        <div class="pulse1"></div><!-- 波纹小盒子1-->
        <div class="pulse2"></div><!-- 波纹小盒子2-->
        <div class="pulse3"></div><!-- 波纹小盒子3-->
    </div>
</div>
</body>
</html>